<!DOCTYPE html>
<html lang="cn" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>下单详情</title>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>

        *{
            font-family: 仿宋;
            color: rgb(16, 91, 6);
        }
        body {
            background-image: url('pic/bizhi.jpg');
            background-repeat: no-repeat; /* 背景图片不重复 */
            background-size: cover; /* 背景图片覆盖整个元素 */
            background-position: center; /* 背景图片居中 */
        }
        #check{
            border: 1px solid black;
            border-radius: 10px;
            background-color: white;
            width: 300px;
            height: 400px;
            margin: 100px auto;
            padding-left: 80px;
        }
        .check_text{
            padding-bottom: 10px;
        }
        input{
            width: 140px;
            height: 18px;
        }
        select{
            height: 20px;
            width: 145px;
        }
        option{
            text-align: center;
        }
    </style>
</head>
<body id="app">
<div id="check">
    <h5 style="padding-left: 60px;font-size: 18px;">下单详情</h5>
    <div class="check_text">
        <!-- 创建一个日期输入框 -->
        取餐日期：<input type="date" id="dateInput" style="width: 140px;height: 18px" ><br>
    </div>

    <div class="check_text">
        <!-- 创建一个时间输入框 -->
        取餐时间：<input type="time" id="timeInput"><br>
    </div>

    <div class="check_text">
        打包方式：<select id="isPack" name="isPack">
        <option value="0">堂食</option>
        <option value="1">打包</option>
    </select>
    </div>

    <div class="check_text">
        电&nbsp;&nbsp;&nbsp;&nbsp;话：<input type="text" name="phone" id="phone">
    </div>

    <div class="check_text">
        收货地址：<input type="text" id="address">
    </div>

    <div class="check_text">
        支付方式：<select id="payMethod" name="payMethod">
        <option value="1">现金</option>
        <option value="2">支付宝</option>
        <option value="3">微信</option>
    </select><br>
    </div>

    <div class="check_text" style="padding-left: 160px;padding-top: 20px">
        <button v-on:click="this.getCheckOut()">立即下单</button>
    </div>


</div>
</body>
<script>
    //定义vue对象
    const app = {
        //属性
        data() {
            return {
                //显示的食品
                foods: [],

                //购买数量
                num:1,
            }
        },
        //行为
        methods:{
            //下单功能
            getCheckOut:function (){
                axios({
                    method: "post", url: "/getCheckOut",
                    data: {
                        takeTime:document.getElementById("dateInput").value+" "+document.getElementById("timeInput").value+":00",
                        isPack:document.getElementById("isPack").value,
                        phone: document.getElementById("phone").value,
                        address:document.getElementById("address").value,
                        payMethod:document.getElementById("payMethod").value
                    }
                }).then((response) => {
                    if(response.data==="ok"){
                        alert("购买成功！")
                        window.location.href="/index.html"
                    }else {
                        alert(response.data)
                    }

                });
            },
        },
        //初始化
        mounted(){
            console.log("页面加载成功！")
        }
    }
    //启动vue
    Vue.createApp(app).mount("#app")
</script>
</html>